<template>
  <div class="gonggao-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="头条公告板"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <van-list
      class="ggList"
      offset="10"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        :title="item.title"
        :label="item.pubdate"
        @click="showContent(item.id)"
      />
    </van-list>

    <van-dialog v-model="show" :title="gg.title" width="90%">
      <template slot="default">
        <div class="ggcontent">
          {{ gg.content }}
        </div>
        <p class="pubdate">{{ gg.pubdate }}</p>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import { getGGContentAPI, getGGsAPI } from '@/api'
export default {
  name: 'GGIndex',
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      totalCount: 0,
      error: false,
      page: 1, // 当前页码
      per_page: 20, // 页码容量
      show: false,
      gg: {}
    }
  },
  methods: {
    // 获取公告板列表
    async onLoad () {
      this.loading = true
      try {
        // 1. 请求获取数据
        const { data } = await getGGsAPI({
          page: this.page,
          per_page: this.per_page
        })
        // console.log(data)
        const { results } = data.data
        this.list.push(...results)

        this.loading = false
        // 4. 判断数据是否加载结束
        if (!results.length) {
          this.finished = true
        } else {
          this.page++
        }

        // console.log(this.list.length)
      } catch (err) {
        console.log(err)
        this.error = true
        this.loading = false
      }
    },
    // 获取公告板具体内容
    async showContent (id) {
      const { data: res } = await getGGContentAPI(id)
      console.log(res)
      this.gg = res.data
      this.show = true
    }
  }
}
</script>

<style scoped lang="less">
.ggList {
  padding-top: 80px;
}

.ggcontent {
  margin: 20px 0px;
  padding: 30px;
}
.pubdate {
  padding-left: 30px;
  color: #ccc;
  // font-size: 14px;
}
</style>
